<template>
  <div>
    <div>头部</div>
    <div class="lb">
      <div>猜你喜欢</div>
      <div class="up">
        <div>综合排序</div>
        <div @click="yuanjin" class="juli">距离最近</div>
        <div @click="liang" class="xiaoliang">销量最高</div>
      </div>
      <div @click="tiaozhuan(item.mtWmPoiId)" class="down" v-for="(item, index) in shujuu" :key="index">
        <div class="tu">
          <img :src="item.picUrl" alt="">
        </div>
        <div class="text">
          <div>{{ item.name }}</div>
          <section>{{ item.monthSalesTip }}</section>
          <section>距离{{ item.distance }}</section>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { onMounted, ref } from 'vue'
import { elm } from '@/api'
var shujuu = ref([])
//距离
var yuanjin = () => {
  shujuu.value.sort(function (a, b) {
    // console.log(parseInt(a.distance));
    return (parseInt(a.distance) - parseInt(b.distance))
  })
}
//销量
var liang = () => {
  shujuu.value.sort(function (a, b) {
    // console.log(parseInt(a.monthSalesTip.substring(2,a.monthSalesTip.length)));
    return (parseInt(a.monthSalesTip.substring(2, a.monthSalesTip.length + 1)) - parseInt(b.monthSalesTip.substring(2, b.monthSalesTip.length + 1)))
  })
}
onMounted(() => {
  //请求店铺列表
  elm().then((res) => {
    // console.log(res.data.list);
    shujuu.value = res.data.list
  })
})
</script>

<style scoped>
.lb {
  background-color: cornflowerblue;
}

.lb .up {
  display: flex;
  justify-content: space-around;
}

.lb .down {
  display: flex;
  margin-top: 10px;
  margin-bottom: 30px;
}

.lb .down .tu {
  width: 120px;
  background-color: aqua;
  margin-left: 10px;
}

.lb .down .tu img {
  width: 100%;
}

.lb .down .text {
  margin-left: 20px;
}

.lb .down .text section {
  margin-top: 10px;
}
</style>